<!--菜单4:
水表实时监控模块-->
<template>
    <el-row :gutter="0" style="width: 100%;flex: 1;">
        <LayoutLeft title="汝阳市人民医院仪表实时监测图">
            <template v-if="this.radios === 1">
                <table border="1px" cellpadding="0" cellspacing="0" style="margin: auto"
                  v-if="tableData.length > 0" >
                  <tr v-for="(row , i) in tableData">
                      <template v-for="(cell , j) in row">
                          <td>{{ cell }}</td>
                      </template>
                  </tr>
                </table>
              <div id="table-chart">
              </div>
            </template>
            <template v-if="this.radios === 2">
              <el-row>
                <div>
                  <el-button size="mini" style="width: 100px;height: 30px;background-color: #F1F5F8;margin-left: 30px;border-radius: 5px;" plain>
                    导出</el-button>
                </div>
              </el-row>
              <el-table
                  :data="dataForm_tableData"
                  :cell-style="{textAlign:'center',padding:'0'}"
                  :default-sort = "{prop: 'date', order: 'descending'}"
                  :header-cell-style="{backgroundColor:'#F5F8FF',textAlign:'center',padding:'0'}"
                  border
                  height="100%"
                  width="100%">
                <el-table-column
                    prop="time"
                    label="采集时间"
                    sortable
                    width="420px">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="参数名称"
                    sortable
                    style="text-align: center"
                    width="420px">
                </el-table-column>
                <el-table-column
                    prop="data"
                    label="读数"
                    sortable>
                </el-table-column>
              </el-table>
            </template>
        </LayoutLeft>

        <LayoutRight title="数据查询">
            <div>
                <div>
                    <div style="flex: 1;padding: 0.3em 0.5em;">显示方式 :</div>
                    <el-radio-group v-model="radios">
                        <el-radio :label="1">图像</el-radio>
                        <el-radio :label="2">数据表格</el-radio>
                    </el-radio-group>
                </div>
                <div style="margin-left: 10px;margin-top: 10px" v-if="radios==1">
                    <div style="color: #999999">支路仪表 :</div>
                    <select v-model="op1_value" style="width: 205px;height: 25px;">
                        <option op1_value="支路仪表1">支路仪表1</option>
                        <option op1_value="支路仪表2">支路仪表2</option>
                        <option op1_value="支路仪表3">支路仪表3</option>
                    </select>
                </div>
                <div style="margin-top: 10px;margin-left: 10px" v-if="radios==1">
                    <div style="color: #999999">是否开启实时监测 :</div>
                    <select v-model="op2_value" style="height: 25px;width: 205px;">
                        <option op2_value="是">是</option>
                        <option op2_value="否">否</option>
                    </select>
                </div>
                <div style="width: 90%;height: 50%;margin: 10px auto 0;" v-if="op2_value=='否' && radios==1">
                    <el-collapse>
                        <el-collapse-item>
                            <template slot="title">
                                <span style="margin-left: 10px">选择时间段</span>
                            </template>
                            <div>开始时间：</div>
                            <el-date-picker
                                v-model="start_date"
                                type="datetime"
                                size="mini"
                                placeholder="选择日期时间"
                                style="height: 30px"
                                align="right"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                            <div>结束时间：</div>
                            <el-date-picker
                                v-model="end_date"
                                type="datetime"
                                size="mini"
                                placeholder="选择日期时间"
                                align="right"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                            <el-button style="width: 100%;background-color: white;height: 30px;margin-top: 10px;" @click="queryDate">确认</el-button>
                        </el-collapse-item>
                    </el-collapse>
                </div>

                <div v-if="radios === 2">
                    <DataList></DataList>
                </div>
            </div>
            <LayoutCard class="right-bottom">
                <div @click="change(1)" :class="{checked: values === 1}">
                    <img src="../../assets/img/img1.png">&nbsp;
                    <span>负载趋势</span>
                </div>
                <div @click="change(2)" :class="{checked: values === 2}">
                    <img src="../../assets/img/img2.png">&nbsp;
                    <span>电压趋势</span>
                </div>
                <div @click="change(3)" :class="{checked: values === 3}">
                    <img src="../../assets/img/img3.png">&nbsp;
                    <span>电流趋势</span>
                </div>
                <div @click="change(4)" :class="{checked: values === 4}">
                    <img src="../../assets/img/img4.png">&nbsp;
                    <span>有功功率</span>
                </div>
                <div @click="change(5)" :class="{checked: values === 5}">
                    <img src="../../assets/img/img5.png">&nbsp;
                    <span>水表耗水量</span>
                </div>
            </LayoutCard>
        </LayoutRight>
    </el-row>
</template>

<script>
import DataList from "@/components/ElectricityMonitor/DataList";
import {formatDate} from "@/utils/date";
import {compare} from "@/utils/compare";
import LayoutRight from "@/components/Layout/LayoutRight";
import LayoutCard from "@/components/Layout/LayoutCard";
import LayoutLeft from "@/components/Layout/LayoutLeft";

export default {
    data() {
        return {
            radio: 1,
            radios:1,
            op1_value: "支路仪表1",
            op2_value: "是",
            flag: 1,
            start_date: "",
            end_date: "",
            values: 1,
            box_show: 1,
            tableData:[],
            charData:[],
            dataForm_tableData:[],
            index_id:1,
        };
    },
    components: {
        LayoutLeft,
        LayoutCard,
        LayoutRight,
        DataList
    },
    mounted() {
      const chartDom = document.getElementById('table-chart');
      this.chart = this.echarts.init(chartDom);
      this.change(1);
    },
    updated() {
      this.updateChart();

    },
    methods:{
      updateChart() {
        const option = {
            xAxis:{
              type:'time',
              min: new Date("2019/12/21"),
              max: new Date("2021/11/21"),
              splitNumber:12,
            },
            yAxis:{
              type: 'value',
              splitNumber: 20,
              min:0
            },
            grid:{
              x: 40,
              x2: 20,
              y2: 40,
            },
            series:[{
             data: this.charData,
             type: 'line'
            }]
        };
        option && this.chart.setOption(option);
        this.chart.resize();
      },
      change(index_id) {

        this.index_id = index_id;

        let base = +new Date(2019, 12, 21);
        const interval = 10 * 24 * 3600 * 1000;
        const data = [];
        for (let i = 0; i < 80; i++) {
          const now = new Date(base += interval);
          data.push([
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(Math.random() * 20 + 10)
          ]);
        }
        this.charData = data;

        if (index_id === 1) {
          this.axios.get('/api/module4/LoadTrend_dataForm').then(resp => {
            this.dataForm_tableData = resp.data.list;
          })
          this.axios.get('/api/module4/LoadTrend_chart').then(resp => {
            const data = resp.data.list[0];
            this.tableData = [
              ['电表编号', data.id, '电表名称', data.name],
              ['安装位置', data.location, '电表参数[Kwh]', data.data],
              ['每日用电[Kwh]', data.day_ele, '每月用电[Kwh]', data.month_ele],
              ['每年用电[Kwh]', data.year_ele, '通讯时间', data.time]
            ];
          })
        } else if (index_id === 2) {
          this.axios.get('/api/module4/VoltageTrend_dataForm').then(resp => {
            this.dataForm_tableData = resp.data.list;
          })
          this.axios.get('/api/module4/VoltageTrend_chart').then(resp => {
            const data = resp.data.list[0];
            this.tableData = [
              ['电压编号', data.id, '电压名称', data.name],
              ['安装位置', data.location, '电压参数[Kwh]', data.data],
              ['每日用电[Kwh]', data.day_ele, '每月用电[Kwh]', data.month_ele],
              ['每年用电[Kwh]', data.year_ele, '通讯时间', data.time]
            ];
          })
        } else if (index_id === 3) {
          this.axios.get('/api/module4/CurrentTrend_dataForm').then(resp => {
            this.dataForm_tableData = resp.data.list;
          })

          this.axios.get('/api/module4/CurrentTrend_chart').then(resp => {
            const data = resp.data.list[0];
            this.tableData = [
              ['电流编号', data.id, '电流名称', data.name],
              ['安装位置', data.location, '电流参数[Kwh]', data.data],
              ['每日用电[Kwh]', data.day_ele, '每月用电[Kwh]', data.month_ele],
              ['每年用电[Kwh]', data.year_ele, '通讯时间', data.time]
            ];
          })
        } else if (index_id === 4) {
          this.axios.get('/api/module4/ActivePower_dataForm').then(resp => {
            this.dataForm_tableData = resp.data.list;
          })
          this.axios.get('/api/module4/ActivePower_chart').then(resp => {
            const data = resp.data.list[0];
            this.tableData = [
              ['功率编号', data.id, '功率名称', data.name],
              ['安装位置', data.location, '功率参数[Kwh]', data.data],
              ['每日功率[Kwh]', data.day_ele, '每月功率[Kwh]', data.month_ele],
              ['每年功率[Kwh]', data.year_ele, '通讯时间', data.time]
            ];
          })
        } else if (index_id === 5) {
          this.axios.get('/api/module4/WaterConsumption_dataForm').then(resp => {
            this.dataForm_tableData = resp.data.list;
          })
          this.axios.get('/api/module4/WaterConsumption_chart').then(resp => {
            const data = resp.data.list[0];
            this.tableData = [
              ['水表编号', data.id, '水表名称', data.name],
              ['安装位置', data.location, '水流参数[Kwh]', data.data],
              ['每日用水[Kwh]', data.day_ele, '每月用水[Kwh]', data.month_ele],
              ['每年用水[Kwh]', data.year_ele, '通讯时间', data.time]
            ];
          })
        }else{
            this.dataForm_tableData = [];
            this.tableData = [];
        }
      },
      queryDateMsg() {
        //判断所选日期是否为空
        if (!this.start_date || !this.end_date) {
          this.$message.error('日期不能为空');
        } else {
          //格式化日期
          let start_date = formatDate(this.start_date, 'yyyy-MM-dd hh:mm:ss')
          let end_date = formatDate(this.end_date, 'yyyy-MM-dd hh:mm:ss')
          //在start_date必须小于end_date的前提下
          if (!compare(start_date, end_date)) {
            //是负载趋势且为表格的情况下
            if (this.values == 1 && this.radios == 2) {
              this.axios.get('/api/module4/LoadTrend_dataForm_queryMsg',{
                params:{
                  start_date:start_date,
                  end_date:end_date
                }
              }).then(resp=>{
                this.dataForm_tableData=resp.data.list;
              })
            }
            //是电压趋势且为表格的情况下
            if (this.values == 2 && this.radios == 2) {
              this.axios.get('/api/module3/VoltageTrend_dataForm_queryMsg',{
                params:{
                  start_date:start_date,
                  end_date:end_date
                }
              }).then(resp=>{
                this.dataForm_tableData=resp.data.list;
              })
            }
            //是电流趋势且为表格的情况下
            if (this.values == 3 && this.radios == 2) {
              this.axios.get('/api/module3/CurrentTrend_dataForm_queryMsg',{
                params:{
                  start_date:start_date,
                  end_date:end_date
                }
              }).then(resp=>{
                this.dataForm_tableData=resp.data.list;
              })
            }
            //是有功功率且为表格的情况下
            if (this.values == 4 && this.radios == 2) {
              this.axios.get('/api/module3/ActivePower_dataForm_queryMsg',{
                params:{
                  start_date:start_date,
                  end_date:end_date
                }
              }).then(resp=>{
                this.dataForm_tableData=resp.data.list;
              })
            }
            //是水表耗水量且为表格的情况下
            if (this.values == 5 && this.radios == 2) {
              this.axios.get('/api/module3/WaterConsumption_dataForm_queryMsg',{
                params:{
                  start_date:start_date,
                  end_date:end_date
                }
              }).then(resp=>{
                this.dataForm_tableData=resp.data.list;
              })
            }
          } else {
            this.$message.error('请注意所选日期的顺序');
          }
        }
      },
    }
}
</script>

<style scoped>
.checked{
    background-color: #D6D6D6;
}
.right-bottom > div {
    padding: 0.1em 0.2em;
}

.right-bottom > div > * {
    font-size: medium;
    vertical-align: middle;
    margin-right: 0.1em;
}

</style>
